<template>
	<div>
		<el-dialog
			center
			title="修改记录"
			width="1200px"
			:visible="visible"
			:destroy-on-close="true"
			:before-close="handleClose"
			@close="handleClose"
		>
			<el-form
				ref="form"
				:inline="true"
				:model="queryData"
				label-width="auto"
				label-suffix=":"
			>
				<el-form-item label="总代账号" prop="merchantId">
					{{ curData.proxyName || '-' }}
				</el-form-item>
				<el-form-item label="所属商户" prop="merchantId">
					{{ curData.merchantName || '-' }}
				</el-form-item>
			</el-form>
			<el-table
				v-loading="loading"
				element-loading-spinner="el-icon-loading"
				border
				size="mini"
				class="small-size-table"
				:data="dataList"
				style="width: 100%"
				:max-height="tableHeight"
				:header-cell-style="getRowClass"
				highlight-current-row
			>
				<el-table-column
					align="center"
					label="序号"
					type="index"
					width="60"
				></el-table-column>
				<el-table-column
					prop="createdAt"
					align="center"
					label="修改时间"
					min-width="200"
				>
					<template slot-scope="scope">
						<span>{{ scope.row.createdAt || '-' }}</span>
					</template>
				</el-table-column>
				<el-table-column
					prop="createdBy"
					align="center"
					label="修改账号"
					min-width="200"
				>
					<template slot-scope="scope">
						<span>{{ scope.row.createdBy || '-' }}</span>
					</template>
				</el-table-column>
				<el-table-column
					prop="creditLevel"
					align="center"
					label="锁定方式"
					min-width="120"
				>
					<template slot-scope="scope">
						<span v-if="scope.row.netAssetsWindLockType == 1">
							手动锁定
						</span>
						<span v-else>自动锁定</span>
					</template>
				</el-table-column>
				<el-table-column
					prop="afterChipTotal"
					align="center"
					min-width="180"
					show-overflow-tooltip
				>
					<template slot="header">
						<span class="flexBox">
							<span>净资产风控告警阈值</span>
							<el-tooltip
								class="item"
								effect="dark"
								placement="top-start"
							>
								<span slot="content">
									总代团队净资产低于告警阈值将触发净资产告警。
								</span>
								<i class="el-icon-question"></i>
							</el-tooltip>
						</span>
					</template>
					<template slot-scope="scope">
						{{
							handleNumber(
								scope.row.currency,
								scope.row.netAssetsWindAlarmThreshold
							)
						}}
					</template>
				</el-table-column>
				<el-table-column
					prop="afterChipTotal"
					align="center"
					min-width="180"
					show-overflow-tooltip
				>
					<template slot="header">
						<span class="flexBox">
							<span>净资产风控锁定阈值</span>
							<el-tooltip
								class="item"
								effect="dark"
								placement="top-start"
							>
								<span slot="content">
									总代团队净资产低于锁定阈值将触发净资产锁定。
								</span>
								<i class="el-icon-question"></i>
							</el-tooltip>
						</span>
					</template>
					<template slot-scope="scope">
						{{
							scope.row.netAssetsWindLockType == 1 ? '-' : handleNumber(
								scope.row.currency,
								scope.row.netAssetsWindLockThreshold
							)
						}}
					</template>
				</el-table-column>
				<el-table-column
					prop="remark"
					align="center"
					label="备注"
					min-width="200"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						<span>{{ scope.row.remark || '-' }}</span>
					</template>
				</el-table-column>
				<el-table-column align="center" label="图片">
					<template slot-scope="scope">
						<el-button
							v-if="scope.row.imageAddress"
							:disabled="loading"
							type="text"
							class="noicon"
							@click="preViewPicture(scope.row)"
						>
							{{ $t('agent.preview') }}
						</el-button>
						<span v-else>-</span>
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页 -->
			<el-pagination
				v-show="!!total"
				:current-page.sync="pageNum"
				class="pagination"
				background
				layout="total, sizes,prev, pager, next, jumper"
				:page-size="pageSize"
				:page-sizes="$store.getters.pageSizes"
				:total="total"
				:pager-count="9"
				@current-change="handleCurrentChange"
				@size-change="handleSizeChange"
			></el-pagination>
			<image-viewer
				:visible.sync="imageViewerVisible"
				:url-list="imageAddress"
			/>
		</el-dialog>
	</div>
</template>

<script>
import list from '@/mixins/list'
import { filterEmptyParams } from '@/utils'

export default {
  mixins: [list],
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    curData: {
      type: Object,
      default: () => { }
    }
  },
  data() {
    return {
      tableHeight: 400,
      otherDependenComponents: [],
      dataList: [],
      imageViewerVisible: false,
      imageAddress: [],
      queryData: {
        account: '',
        mercharName: ''
      }
    }
  },
  methods: {
    handleClose() {
      this.$emit('update:visible', false)
    },
    preViewPicture(val) {
      const { imageAddress } = val
      this.imageAddress = imageAddress ? imageAddress.split(',') : [imageAddress]
      this.imageViewerVisible = true
    },
    loadData() {
      this.dataList = []
      this.loading = true
      let params = {
        merchantId: this.curData.merchantId,
        topProxyName: this.curData.proxyName,
        ...this.queryData
      }
      params = {
        ...this.queryData,
        ...this.getParams(params)
      }
      this.$api
        .windControllerCreditProxyEditList(filterEmptyParams(params))
        .then((res) => {
          if (res?.code === 200) {
            this.isShow = true
            const { record, totalRecord } = res.data || {}
            this.dataList = Array.isArray(record)
              ? Object.freeze(record)
              : []
            this.total = totalRecord || 0
          } else {
            this.$message({
              message:
                res?.msg ||
                this.$t('agent.interface_exceptions'),
              type: 'error'
            })
          }
          this.loading = false
        })
        .catch(() => (this.loading = false))
    }
  }
}
</script>

<style lang="scss" scoped>
.title {
	color: #02a7f0;
}
.dialog-footer {
	display: flex;
	justify-content: center;
}
.pagination {
	display: flex;
	justify-content: flex-end;
	margin-top: 20px;
}
</style>
